body {
    background-color: black;
    margin: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(5, 19.6vw);
    justify-content: center;
}

.purple-tile,
.white-tile,
.black-tile,
.purple-tile-left,
.white-tile-left,
.black-tile-left,
.purple-tile-right,
.white-tile-right,
.black-tile-right,
.purple-tile-gamedev,
.white-tile-gamedev,
.black-tile-gamedev,
.about-me-button,
.portfolio-button,
.certifications {
    width: 19.6vw;
    height: 19.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12vw;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: background-color 0.2s ease-out;
    text-decoration: none;
    text-align: center;
}

.purple-tile,
.purple-tile-left,
.purple-tile-right,
.purple-tile-gamedev { background-color: #8943eb; color: #fff; }

.white-tile,
.white-tile-left,
.white-tile-right,
.white-tile-gamedev { background-color: #fff; color: #000; }

.black-tile,
.black-tile-left,
.black-tile-right,
.black-tile-gamedev { background-color: #000; color: #8943eb; }

.purple-tile-left,
.white-tile-left,
.black-tile-left { justify-content: flex-start; }

.purple-tile-right,
.white-tile-right,
.black-tile-right { justify-content: flex-end; }

.about-me-button {
    background-color: #8943eb;
    color: #fff;
    font-size: 5vw;
}

.portfolio-button {
    background-color: #000;
    color: #8943eb;
    font-size: 3vw;
}

.certifications { font-size: 9.2vw }

.about-me-button:hover { background-color: #6b2dc2; }
.portfolio-button:hover { background-color: #353535; }

.gamedev-tile:hover, .webdev-tile:hover, .appdev-tile:hover, .certifications:hover { background-color: #353535; }

.no-underline { text-decoration: none; }

.gamedev-drone { width: 12vw; object-fit: contain; margin-bottom: 25% }
.gamedev-robot { width: 15vw; object-fit: contain }
.gamedev-archer { width: 17vw; object-fit: contain; margin-top: 25%}
.gamedev-scientist { width: 14vw; object-fit: contain; margin-top: 25%}
.gamedev-soldier { width: 17vw; object-fit: contain; margin-bottom: 50% }
.gamedev-samurai { width: 16vw; object-fit: contain }

.top-line {
    box-shadow: inset 0 2vw 0 rgb(0, 0, 0);
}
.bottom-line {
    box-shadow: inset 0 -2vw 0 rgb(0, 0, 0);
}
.left-line {
    box-shadow: inset 2vw 0 0 rgb(0, 0, 0);
}
.right-line {
    box-shadow: inset -2vw 0 0 rgb(0, 0, 0);
}
.top-right-line {
    box-shadow: inset 0 2vw 0 rgb(0, 0, 0),
                inset -2vw 0 0 rgb(0, 0, 0);
}
.bottom-right-line {
    box-shadow: inset 0 -2vw 0 rgb(0, 0, 0),
                inset -2vw 0 0 rgb(0, 0, 0);
}
.top-left-line {
    box-shadow: inset 0 2vw 0 rgb(0, 0, 0),
                inset 2vw 0 0 rgb(0, 0, 0);
}
.bottom-left-line {
    box-shadow: inset 0 -2vw 0 rgb(0, 0, 0),
                inset 2vw 0 0 rgb(0, 0, 0);
}
.top-bottom-line {
    box-shadow: inset 0 2vw 0 rgb(0, 0, 0),
                inset 0 -2vw 0 rgb(0, 0, 0);
}